<template>
  <div class="login-wrapper">
    <el-card class="login-main">
      <h1 class="login-tile">vue-admin</h1>
      <el-tabs v-model="activeName" class="demo-tabs" @tab-click="handleClick">
        <el-tab-pane label="账号登入" name="first">
          <el-form
            ref="accoutFormRef"
            :model="accoutForm"
            status-icon
            :rules="accoutRules"
            class="demo-ruleForm"
            size="large"
          >
            <el-form-item prop="username">
              <el-input
                v-model="accoutForm.username"
                type="text"
                placeholder="账号"
                autocomplete="off"
              />
            </el-form-item>
            <el-form-item prop="password">
              <el-input
                v-model="accoutForm.password"
                type="password"
                placeholder="密码"
                autocomplete="off"
              />
            </el-form-item>
            <el-form-item prop="captcha">
              <el-row :gutter="30">
                <el-col :span="12"
                  ><div class="grid-content ep-bg-purple" />
                  <el-input
                    v-model.number="accoutForm.code"
                    placeholder="验证码"
                /></el-col>
                <el-col :span="12">
                  <img :src="codeUrl" @click="getCode" class="login-code-img" />
                </el-col>
              </el-row>
            </el-form-item>
            <el-form-item>
              <el-button
                class="login-button"
                type="primary"
                @click="submitForm(accoutFormRef)"
                >登录</el-button
              >
            </el-form-item>
          </el-form>
        </el-tab-pane>
        <el-tab-pane label="手机号登录" name="second">
          <el-form
            ref="phoneFormRef"
            :model="phoneForm"
            status-icon
            :rules="accoutRules"
            class="demo-ruleForm"
            size="large"
          >
            <el-form-item prop="phoneNumber">
              <el-input
                v-model="phoneForm.phoneNumber"
                type="password"
                placeholder="账号"
                autocomplete="off"
              />
            </el-form-item>
            <el-form-item prop="code">
              <el-row :gutter="30">
                <el-col :span="16"
                  ><div class="grid-content ep-bg-purple" />
                  <el-input
                    v-model.number="phoneForm.code"
                    placeholder="验证码"
                /></el-col>
                <el-col :span="8"
                  ><div class="grid-content ep-bg-purple" />
                  获取验证码</el-col
                >
              </el-row>
            </el-form-item>
            <el-form-item prop="ischeck">
              <el-checkbox v-model="phoneForm.ischeck"
                >我已阅读并同意服务条款、隐私政策</el-checkbox
              >
            </el-form-item>
            <el-form-item>
              <el-button
                class="login-button"
                type="primary"
                @click="submitForm(phoneFormRef)"
                >登录</el-button
              >
            </el-form-item>
          </el-form>
        </el-tab-pane>
      </el-tabs>
      <el-divider content-position="center">其他登入方式</el-divider>
      <el-row :gutter="5" style="padding: 0 80px">
        <el-col :span="6"
          ><div class="grid-content ep-bg-purple" />
          <el-tag class="ml-2" type="info">QQ</el-tag></el-col
        >
        <el-col :span="6"
          ><div class="grid-content ep-bg-purple" />
          <el-tag class="ml-2" type="info">WX</el-tag></el-col
        >
        <el-col :span="6"
          ><div class="grid-content ep-bg-purple" />
          <el-tag class="ml-2" type="info">QQ</el-tag></el-col
        >
        <el-col :span="6"
          ><div class="grid-content ep-bg-purple" />
          <el-tag class="ml-2" type="info">QQ</el-tag></el-col
        >
      </el-row>
    </el-card>
  </div>
</template>

<script setup lang="ts">
import { onMounted, reactive, ref } from "vue";
import type { FormInstance, TabsPaneContext } from "element-plus";
import router from "@/router";
import { getCodeImg } from "@/api/login";
import { useUserStore } from "@/stores/user";
const userStore = useUserStore();
const phoneFormRef = ref<FormInstance>();

const accoutFormRef = ref<FormInstance>();

const activeName = ref("first");
const captchaOnOff = ref(true);
const codeUrl = ref("");

const handleClick = (tab: TabsPaneContext, event: Event) => {
  console.log(tab, event);
};

const checkAge = (rule: any, value: any, callback: any) => {
  if (!value) {
    return callback(new Error("Please input the age"));
  }
  setTimeout(() => {
    if (!Number.isInteger(value)) {
      callback(new Error("Please input digits"));
    } else {
      if (value < 18) {
        callback(new Error("Age must be greater than 18"));
      } else {
        callback();
      }
    }
  }, 1000);
};

const validatePass = (rule: any, value: any, callback: any) => {
  if (value === "") {
    callback(new Error("Please input the password"));
  } else {
    if (accoutForm.username !== "") {
      if (!accoutFormRef.value) return;
      accoutFormRef.value.validateField("checkPass", () => null);
    }
    callback();
  }
};
const validatePass2 = (rule: any, value: any, callback: any) => {
  if (value === "") {
    callback(new Error("Please input the password again"));
  } else if (value !== accoutForm.username) {
    callback(new Error("Two inputs don't match!"));
  } else {
    callback();
  }
};

const accoutForm = reactive({
  password: "",
  username: "",
  code: "",
  uuid: "",
});

const phoneForm = reactive({
  phoneNumber: "",
  code: "",
  ischeck: false,
});

const accoutRules = reactive({
  pass: [{ validator: validatePass, trigger: "blur" }],
  checkPass: [{ validator: validatePass2, trigger: "blur" }],
  age: [{ validator: checkAge, trigger: "blur" }],
});

const submitForm = (formEl: FormInstance | undefined) => {
  if (!formEl) return;
  formEl.validate((valid) => {
    if (valid) {
      console.log("submit!");
    } else {
      console.log("error submit!");
      return false;
    }
  });
  userStore.login(accoutForm).then(() => {
    console.log("登入");
    router.push("/");
  });
};

const getCode = () => {
  getCodeImg().then((res) => {
    console.log(res);
    captchaOnOff.value =
      res.captchaOnOff === undefined ? true : res.captchaOnOff;
    if (captchaOnOff.value) {
      console.log(res);
      codeUrl.value = "data:image/gif;base64," + res.img;
      accoutForm.uuid = res.uuid;
    }
  });
};
onMounted(() => {
  getCode();
});
const resetForm = (formEl: FormInstance | undefined) => {
  if (!formEl) return;
  formEl.resetFields();
};
</script>
<style lang="scss">
.login-wrapper {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  background-image: url("../assets/images/login_bg.jpeg");
  background-size: cover;
  width: 100%;
  height: 100%;
}
.login-main {
  width: 450px;
  height: 470px;
  margin-right: 150px;
  .login-tile {
    text-align: center;
  }
  .login-button {
    display: flex;
    flex: 1;
  }
}
.login-code-img {
  width: 110px;
}
.el-card {
  --el-card-padding: 20px 40px;
}
</style>
